<template>
	<view>
		<u-navbar title-color="#ffffff" title="订单详情" back-text="返回" back-icon-color="#ffffff" :back-text-style="textObj"
		 :border-bottom="false" :background="background"></u-navbar>
		<view class="top-bg">
			<u-image src="https://photo.hiyipin.net/USER/c43218fa-6163-480a-97f2-1ebe8d58a01e.png" width="750" mode="widthFix"></u-image>
		</view>
		<view class="content" v-if="orderInfo != ''">
			<view class="title">{{status()}}</view>
			<u-gap></u-gap>
			<view class="address">
				<u-icon name="map" size="40" color="#A5A4A4"></u-icon>
				<view class="info">
					<view class="">收货人：{{orderInfo.orderformAddress.userName}}</view>
					<view class="">收货地址：{{orderInfo.orderformAddress.areaInfo}} {{orderInfo.orderformAddress.address}}</view>
				</view>
			</view>
			<u-gap></u-gap>
			<view class="goods-info">
				<view class="goods-box">
					<navigator hover-class="none" :url="`/pages/productDetail/productDetail?id=${item.goodsId}`" class="goods-item" v-for="(item,index) in orderInfo.items" :key="item.id">
						<u-image border-radius="14" width="144" height="144" mode="aspectFill" :src="goodsPhoto(item.goodsPhoto)"></u-image>
						<view class="goods-detail">
							<view class="name">{{item.goodsName}}</view>
							<view class="specifications">{{item.goodsSkuName}}</view>
							<view class="order-info" v-if="isRedintegray">
								<view class="">积分<text>{{total_integral}}</text></view>
								<view class="">x{{item.goodsCount}}</view>
							</view>
							<view class="order-info" v-else>
								<view class="">￥<text>{{item.totalPrice}}</text></view>
								<view class="">x{{item.goodsCount}}</view>
							</view>
						</view>
					</navigator>
				</view>
				<view class="info-box">
					<view class="info-item" v-if="isRedintegray">
						<view class="">商品总额</view>
						<view class="">积分{{total_integral}}</view>
					</view>
					<view class="info-item" v-else>
						<view class="">商品总额</view>
						<view class="">￥{{orderInfo.totalPrice}}</view>
					</view>
					<view class="info-item">
						<view class="">运费</view>
						<view class="">￥{{orderInfo.shipPrice}}</view>
					</view>
					<view class="info-item">
						<view class="">优惠</view>
						<view class="">￥{{orderInfo.originalPrice - orderInfo.totalPrice}}</view>
					</view>
				</view>
				<view class="tip" v-if="isRedintegray">共{{orderInfo.items.length}}件商品 实付款：积分{{total_integral}}</view>
				<view class="tip" v-else>共{{orderInfo.items.length}}件商品 实付款：￥{{orderInfo.totalPrice}}</view>
			</view>
			<u-gap></u-gap>
			<view class="goods-info" style="padding-bottom: 0;">
				<view class="goods-title">订单信息</view>
				<view class="info-box">
					<view class="info-item">
						<view class="">订单编号：</view>
						<view class="">{{orderInfo.orderNumber}}</view>
					</view>
					<view class="info-item">
						<view class="">订单状态：</view>
						<view class="">{{status()}}</view>
					</view>
					<block v-if="orderInfo.pay_type">
						<view class="info-item">
							<view class="">支付方式：</view>
							<view class="">{{orderInfo.pay_type == 'WX_APP' ? '微信' : orderInfo.pay_type == 'ALI_APP' ? '支付宝' : '未知'}}</view>
						</view>
					</block>

					<block v-if="orderInfo.status == 50">
						<view class="info-item">
							<view class="">发货时间：</view>
							<view class="">{{orderInfo.sendGoodsTime}}</view>
						</view>
						<view class="info-item">
							<view class="">收货时间：</view>
							<view class="">{{orderInfo.receiptGoodsTime}}</view>
						</view>
					</block>

					<view class="info-item" style="border-bottom: none;">
						<view class="">创建时间：</view>
						<view class="">{{orderInfo.createTime}}</view>
					</view>
				</view>
			</view>
			<u-gap></u-gap>
		</view>
		<view class="" style="padding-top: 500rpx;" v-else>
			<u-empty mode="data"></u-empty>
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	let uTabOffsetTop = 44 + uni.getSystemInfoSync().statusBarHeight
	export default {
		data() {
			return {
				textObj: {
					color: '#ffffff'
				},
				orderInfo: '',
				background: {
					backgroundColor: 'rgba(254,70,102,0)'
				},
				total_integral:0,
				isRedintegray:false
			};
		},
		onLoad(options) {
			if(options.payType&&options.payType=='RED_INTEGRAL'){
				this.isRedintegray=true;
				this.total_integral=options.total_integral;
			}
			this.$u.get('orderform/info/' + options.orderNumber).then(res => {
				this.orderInfo = res
			})
		},
		methods: {
			goodsPhoto(url) {
				let transformationArray = url.split(',')
				return this.imageURL + transformationArray[0]
			},
			status() {
				switch (this.orderInfo.status) {
					case 10:
						return '待付款'
						break
					case 20:
						return '待发货'
						break
					case 30:
						return '待收货'
						break
					case 60:
						return '已完成'
						break
					case 0:
						return '订单已取消'
						break
					case 40:
						return '已收货'
						break
					case 50:
						return '已评论'
						break
					case 70:
						// return '异常售后处理完成'
						return '售后已处理'
						break
					case 80:
						return '退款'
						break
					case 65:
						return '申请售后中'
						break
				}
			}
		},
		onPageScroll({
			scrollTop
		}) {
			var opacity = 0,
				maxNumber = uTabOffsetTop
			if (scrollTop <= maxNumber) {
				opacity = scrollTop / maxNumber
			} else {
				opacity = 1
			}
			if (opacity == this.opacity) return
			this.background.backgroundColor = `rgba(254,70,102,${opacity})`
		},
	}
</script>

<style lang="scss">
	.goods-info {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 0;

		.goods-title {
			font-weight: bold;
			padding: 0 30rpx;
			padding-bottom: 30rpx;
			font-size: 28rpx;
			border-bottom: 1rpx solid #E8E7E7;
		}

		.tip {
			padding-top: 30rpx;
			text-align: right;
			padding-right: 30rpx;
			font-size: 24rpx;
		}

		.info-box {
			padding: 0 30rpx;
		}

		.info-item {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0;
			align-items: center;
			font-size: 28rpx;
			border-bottom: 1rpx solid #E8E7E7;
		}

		.goods-box {
			border-bottom: 1rpx solid #E8E7E7;
			padding: 0 30rpx;

			.goods-item {
				display: flex;
				padding-bottom: 30rpx;

				.goods-detail {
					flex: 1;
					margin-left: 20rpx;
					position: relative;

					.order-info {
						position: absolute;
						width: 100%;
						bottom: 0;
						left: 0;
						display: flex;
						justify-content: space-between;
						align-items: center;

						view {
							&:first-child {
								font-size: 20rpx;

								text {
									font-size: 28rpx;
								}
							}

							&:last-child {
								color: #AAAAAA;
								font-size: 28rpx;
							}
						}
					}

					.name {
						font-size: 28rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 466rpx;
					}

					.specifications {
						font-size: 24rpx;
						color: #AAAAAA;
					}
				}
			}
		}
	}

	page {
		background-color: #F3F4F5;
	}

	.content {
		padding: 0 30rpx;
		position: relative;
		z-index: 1;

		.address {
			display: flex;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			padding: 40rpx 20rpx;

			.info {
				flex: 1;

				view {
					font-size: 30rpx;
					color: #343434;
				}

				margin: 0 20rpx;
			}
		}

		.title {
			font-size: 36rpx;
			color: #FFFFFF;
			font-weight: bold;
		}
	}

	.top-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}
</style>
